<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="背景" name="背景" key="1">
      <el-row>
        <el-col :span="6">类型</el-col>
        <el-col :span="16">
          <el-select style="width: 100%" v-model="meshAttr.type">
            <!--            <el-select-option value="mesh">网格</el-select-option>-->
            <!--            <el-select-option value="dot">空白</el-select-option>-->
          </el-select>
        </el-col>
      </el-row>
      <div v-if="meshAttr.type === 'mesh'">
        <el-row>
          <el-col :span="6">大小</el-col>
          <el-col :span="14">
            <el-slider :min="1" :max="20" :step="1" v-model="graphSize"/>
          </el-col>
          <el-col :span="2">
            <div class="result">{{ graphSize }}px</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">颜色</el-col>
          <el-col :span="16">
            <el-input type="color" v-model="meshAttr.color" style="width: 100%"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">线条宽度</el-col>
          <el-col :span="14">
            <el-slider :min="0.5" :max="10" :step="0.5" v-model="meshAttr.thickness"/>
          </el-col>
          <el-col :span="2">
            <div class="result">{{ meshAttr.thickness.toFixed(1) }}px</div>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import {defineComponent, ref, reactive, watch} from 'vue';
import {FlowGraph} from '../../common/FlowGraph';

interface IFMeshAttr {
  type: string;
  color: string;
  thickness: number;
}

const activeName = ref('背景')

const meshAttr = reactive<IFMeshAttr>({
  type: 'mesh',
  color: '#e5e5e5',
  thickness: 1,
});
const graphSize = ref(10);

watch(meshAttr, () => {
  FlowGraph.graph.drawGrid({
    type: meshAttr.type,
    args: [
      {
        color: meshAttr.color,
        thickness: meshAttr.thickness,
      },
    ],
  });
});
watch(graphSize, () => {
  FlowGraph.graph.setGridSize(graphSize.value);
});
</script>

<style lang="scss" scoped></style>
